<template>
  <div ref="globalModal" class="binding-classification-modal">
    <a-modal
      v-bind="$attrs"
      v-model:visible="visible"
      title="绑定分类"
      :width="660"
      :getContainer="() => $refs.globalModal"
      :confirm-loading="confirmLoading"
      @ok="modelConfirm"
      @cancel="modelCancel"
    >
      <!-- <SiteClassificationTable :data="siteClassificationTableData" isSelect /> -->
    </a-modal>
  </div>
</template>

<script lang="ts" setup name="BindingClassificationModal">
import SiteClassificationTable from '../../site-classification-table/index.vue'
import { computed, ref, toRefs } from 'vue'
import type { StrType, NumType } from '@/stores/modules/collect-manage/select-data-source'

// props
type Props = { selectItem: { label: StrType; value: NumType; isBind: NumType } }
const props = defineProps<Props>()
const { selectItem } = toRefs(props)

// modelState
let visible = ref<boolean>(false)
let confirmLoading = ref<boolean>(false)

// siteClassificationTable
type TableDataType = {
  sourceClassification: StrType
  siteClassification: NumType
}[]

// const siteClassificationTableData = computed((): TableDataType => {
//   return [{ sourceClassification: selectItem.value.label, siteClassification: null }]
// })
// let siteClassificationTableData = ref<TableDataType>([
//   {
//     sourceClassification: '电影/动作片',
//     siteClassification: null
//   },
//   {
//     sourceClassification: '电影/动作片',
//     siteClassification: null
//   }
// ])

// model
const modelCancel = () => {
  confirmLoading.value = false
  visible.value = false
}
const modelConfirm = () => {
  // confirmLoading.value = true
  console.log('submit')

  //   console.log(formData)
  //   setTimeout(() => {
  //     visible.value = false
  //     confirmLoading.value = false
  //   }, 2000)
}

defineExpose({ visible })
</script>

<style lang="less">
.collect-operate-modal {
  .source-file {
    .ant-form-item-control-input {
      .ant-form-item-children-icon {
        top: 18px;
        right: 84px;
      }

      .input-content {
        display: flex;
      }

      .describe {
        font-size: 12px;
        color: #bfbfbf;
        line-height: 20px;
      }
    }
  }
  .gold-coin {
    margin-top: 10px;
  }
}
</style>
